<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>点微博数据</title>
    <script include="mapv" src="./static/libs/include-openlayers-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            //地图容器div的ID
            target: 'map',
            //地图容器中加载的图层
            layers: [],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.fromLonLat([110, 30]),
                //地图初始显示级别
                zoom: 2,
                //最小级别
                minZoom: 1,
                //最大级别
                maxZoom: 12
            })
        });

        map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileImage({
                url:'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1Ijoid2FuZ2hhaGExIiwiYSI6ImNqeHUycXF5ZDEweDQzYnBiOTcwZGoxMHAifQ.eCGuiA6erHJ7ew-Fkc7dRA'
            })
        }))
        var randomCount = 500;
        var data = [];
        while (randomCount--) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: ol.proj.transform([85 + Math.random() * 50, 25.3 + Math.random() * 20],
                        'EPSG:4326', 'EPSG:3857')
                },
                count: 30 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);

        var mapVOptions = {
            fillStyle: 'rgba(55, 50, 250, 0.8)',
            size: 40,
            globalAlpha: 0.6,
            label: {
                show: true,
                fillStyle: 'white',
                shadowColor: 'yellow',
                font: '15px Arial',
                shadowBlur: 10
            },
            gradient: {
                0.2: "rgb(0,0,255)", 
                0.4: "rgb(0,125,255)",
                0.6: "rgb(0,255,0)", 
                0.8: "rgb(255,125,0)",
                1.0: "rgb(255,0,0)"
            },
            shadowColor: 'rgba(255, 250, 50, 1)',
            shadowBlur: 10,
            max: 200,
            draw: 'honeycomb'
        }
        map.addLayer(
            new ol.layer.Image({
                source: new ol.source.Mapv({
                    map: map,
                    dataSet: dataSet,
                    mapVOptions: mapVOptions
                })
            })
        );
    </script>


</body>

</html>